<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../rest.css">
</head>
<style>
    .container {
        width: 800px;
        margin: 0 auto;
        font-size: 13px;
    }

    .container .message-detail {
        width: 100%;
        display: block;
        outline: none;
        resize: none;
        padding: 5px;
        box-sizing: border-box;
    }

    .message-box {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
    }

    .message-list {
        margin-top: 50px;
    }

    .message-list li {
        /* display: flex; */
        margin-bottom: 10px;
    }

    .message-list li .nick {
        width: 100px;
    }

    .message-list li .content {
        text-indent: 2em;
    }
</style>
</head>

<body>
    <div class="container">
        <div class="message-wrap">
            <textarea class="message-detail" cols="30" rows="10"></textarea>
            <div class="message-box">
                <div class="message-tips">
                    您还可以输入50个字
                </div>
                <button class="message-send">发送</button>
            </div>
        </div>
        <div class="message-list">
            <ul class="list">
                <!-- <li>
                <div class="nick">张三:</div>
                <div class="content">123123</div>
            </li> -->
            </ul>
        </div>
    </div>
</body>
<script>
    var commentText = document.getElementsByClassName('message-detail')[0]
    var messageTips = document.getElementsByClassName('message-tips')[0]
    var messageSend = document.getElementsByClassName('message-send')[0]
    var ul = document.querySelector(".message-list .list")



    commentText.onkeyup = commentText.onkeypress = function (e) {
        var message = this.value
        var sum = 50
        messageTips.innerHTML = `您还可以输入${sum - message.length}个字`
        if (sum - message.length <= 0) {
            e.preventDefault()
            this.value = message.substr(0, 50)
        }
        if (e.ctrlKey && e.which == 13) {
            comment()
        }
    }


    messageSend.addEventListener('click', comment)


    function comment() {
        var message = commentText.value.trim()
        if (message) {
            var commentHtml = `
            <li>
                <div class="nick">张三:</div>
                <div class="content">${message}</div>
            </li>
            `
            ul.innerHTML = commentHtml + ul.innerHTML
            commentText.value = ''
        }
    }




</script>

</html>